<!--支部空间评论-->
<template>
  <div class="drawer">
    <div :class="maskClass" @click="closeByMask"></div>
    <div :class="mainClass" :style="mainStyle" class="main">
      <div class="drawer-head">
        <div class="left">全部&nbsp;{{ commentTotal }}&nbsp;条评论</div>
        <div class="close-btn icon-close" v-show="closable" @click="closeByButton"></div>
      </div>
      <section class="mgt-2 pdh-2 scoll-my">
        <!--          <p class="comment-my">评论&nbsp;&nbsp;(&nbsp;{{commentTotal}}&nbsp;)</p>-->
        <fetchData
          class="live-msg-wrap pdv-4"
          :loading="isLoading"
          :data="selectList"
        ></fetchData>
        <div
          class="study-my"
          @click="goMemorabiliasDetail(item, 4)"
          v-for="(item, index) in selectList"
          :key="item.id"
        >
          <div class="user-avatar">
            <div class="avatar">
              <img
                v-if="item.createUser"
                :src="tools.getAvatarUrl(item.createUser)+'&'+Date.now()"
                alt=""
              />
              <img
                v-else
                src="../../../static/images/user_bg.jpg"
                alt=""
              />
            </div>
            <div class="head-my">
              <div>{{ item.createUserName }}{{getMyself(item.createUser) }}</div>
              <div v-if="isMySelf(item)" @click.stop="del(item.id,index,selectList,1)" class="right"><span
                class="icon-delete"></span>删除
              </div>
            </div>
          </div>
          <div class="card-foot-my">
            <div class="span-my">
              {{ item.comment }}
            </div>
            <div class="text">
              <div>{{ getTimeNew(item.createTime) }}</div>
              <div class="right-my">
                <div class="support"><i @click="upComment(item,index,selectList,1)" class="icon-like"
                                        :class="{'icon-licked':item.selfSupport == true}"></i>{{ item.supportTotal }}
                </div>
                <div class="support"><i @click="onfocus(item)" class="icon-comment"></i>{{ item.commentTotal }}</div>
              </div>
            </div>
<!--            评论别人的心得的评论-->
            <div class="recomment-my" v-for="(child,indexChild) in item.child" :key="child.id">
              <!--              <div class="recomment-my" >-->
              <!--                {{item.child}}-->
              <div class="head-my title">
                <div >{{child.createUserName}}{{getMyself(child.createUser) }}<span class="arrow_left"></span>{{ child.replyToUser }}</div>
                <div v-if="isMySelf(item)" @click.stop="del(child.id,indexChild,item,2)" class="right"><span
                  class="icon-delete"></span>删除
                </div>
              </div>
              <div class="span-my">
                {{ child.comment }}
              </div>
              <div class="text">
                <div>{{ getTimeNew(child.createTime) }}</div>
                <div class="right-my">
                  <div class="support"><i @click="upComment(child,indexChild,item.child,2)" class="icon-like" :class="{'icon-licked':child.selfSupport == true}"></i>{{
                      child.supportTotal
                    }}
                  </div>
                  <div class="support" @click="onfocusOne(child,item.id)"><i class="icon-comment"></i></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <p class="pdv-10"></p>
        <div class="inner">
          <div class="avatar">
            <img
              v-if="userInfo.id"
              :src="tools.getAvatarUrl(userInfo.id)+'&'+Date.now()"
              alt=""
            />
            <img
              v-else=""
              src="../../../static/images/user_bg.jpg"
              alt=""
            />
          </div>
          <div class="input-wrap">
            <textarea ref="textareaPl" :class="textareaClass" v-on:focus="onfocus()" v-on:blur="onblur()" placeholder="添加评论..."
                      v-model="content"></textarea>
            <span @click="save" v-if="content.length > 0 && content.trim().length != 0" class="text-btn"><div class="spans-my">提交</div></span>
          </div>
          <p class="pdv-10"></p>
          <p class="pdv-10"></p>
          <!--<div class="input-wrap1" v-if="!isComment">
          </div>-->
        </div>
        <section class="people-list">
          <div
            class="text-center no-data"
            :loading="isLoading"
            :data="selectList"
            v-if="!isLoading && selectList.length === 0"
          >
            <img src="../../../static/images/dangjian/home/water-logo-comment.png" alt="">
          </div>
          <p class="pdv-10"></p>
          <p class="pdv-10"></p>
        </section>
      </section>
    </div>
  </div>
</template>

<script>
import Textarea from 'cube-ui'
import api from '@/common/config/api'
import tools from "@/utils/tools";
import branchFooterComponent from "@/components/common/branchFooterComponent";
import moment from 'moment'

export default {
  name: 'fullscreenComponent',
  components: {branchFooterComponent, Textarea},
  props: {
    commentTotal: {
      type: Number,
      default: 0
    },
    commentId: {
      type: String,
      default: ''
    },
    auther: {
      type: String,
      default: ''
    },
    xdId: {
      type: String,
      default: ''
    },
    // 是否打开
    display: {
      type: Boolean
    },

    // 是否显示关闭按钮
    closable: {
      type: Boolean,
      default: true
    },

    // 是否显示遮罩
    mask: {
      type: Boolean,
      default: true
    },

    // 是否点击遮罩关闭
    maskClosable: {
      type: Boolean,
      default: true
    },

    // 宽度(支持百分比)
    width: {
      type: String,
      default: '100%'
    },

    // 是否在父级元素中打开
    inner: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isLoading: true,
      selectList: [],
      userInfo: '',
      content: '',
      textareaClass: '',
      commentNewId: '',
      replyToUser:'',
    }
  },
  created() {
    this.userInfo = this.$store.state.userInfo;
    console.log('this.userInfo=', this.userInfo);
    this.loadData()
  },
  watch: {
    commentId(val, oldVal) {
      this.content = ''
      this.loadData()
      console.log('valvalval', val);
      console.log('xdIdxdId', this.xdId);
    }
  },
  computed: {
    maskClass: function () {
      return {
        'mask-show': (this.mask && this.display),
        'mask-hide': !(this.mask && this.display),
        'inner': this.inner
      }
    },
    mainClass: function () {
      return {
        'main-show': this.display,
        'main-hide': !this.display,
        'inner': this.inner
      }
    },
    mainStyle: function () {
      return {
        width: this.width,
        right: this.display ? '0' : `-${this.width}`,
        borderLeft: this.mask ? 'none' : '1px solid #eee'
      }
    }
  },
  mounted() {
    if (this.inner) {
      let box = this.$el.parentNode
      box.style.position = 'relative'
    }
  },
  methods: {
    /*评论提交*/
    save() {
      if (this.content.length == 0 || this.content.trim().length == 0) {
        return this.tools.alert('请填写留言')
      }
      let params = {
        "comment": this.content,
        "commentId": this.commentNewId,
        "optFlag": "2",
        "replyToUser": this.replyToUser,
        "xdId": this.xdId
      }
      // this.tools.showLoading()
      this.fetchService.topic_subComment(params).then(res => {
        // this.tools.hideLoading()
        if (res.code === 0) {
          this.content = ''
          // this.data.comments ++
          this.$emit('commentTotalAdd')
          // this.tools.tip('评论成功', 2000)
          this.commentNewId = '' //清空commentNewId 防止前一个数据带过来
          this.replyToUser = '' //清空replyToUser
          this.loadData()
          return
        }
        return this.tools.tip(res.message || '网络异常，请稍后重试', 2000)
      })
    },
    getMyself(createUser){//判断是否是自己
      if(this.auther === createUser){
        return '(作者)'
      }
    },
    loadData() {
      let list=[]
      this.isLoading =true
      let data = {
        optFlag: 2,
        pageNo: 1,
        pageSize: 1000,
        xdId: this.xdId
      }
      console.log('datadata=data=', data);
       this.fetchService.topic_selectCommentListByXd(data).then(res => {
        if (res.code !== 0) {
          return this.tools.tip(res.message)
        }
        this.commentTotal = res.count
        res.data.forEach(item => {
          let dataNew = {
            "commentId": item.id,
            "createUser": item.createUser,
            "optFlag": 2,
            "pageNo": 1,
            "pageSize": 1000,
            "xdId": item.xdId
          }
          this.fetchService.topic_selectCommentListByXd(dataNew).then(res => {
            if (res.code !== 0) {
              return this.tools.tip(res.message)
            }
            item.child = res.data
            list.push(item)
            console.log('item=', item);
            console.log('list=', list);
          })
        })
        console.log('res.list==',list);
        this.selectList =list
        this.isLoading = false
        console.log(this.selectList);
      })
    },
    addTopic() {
      this.$router.push({name: 'learningExperiencesAdd', query: {topicId: this.data.id}});
    },
    getTimeNew(createTime) {
      if (new Date(createTime).getFullYear() < new Date().getFullYear()) {
        return moment(createTime).format("YYYY-M-D");
      } else if (new Date(createTime).getDay() == new Date().getDay()) {
        return moment(createTime).format("HH:mm:ss");
      }
      return moment(createTime).format("MM-DD");
    },
    goMemorabiliasDetail() {

    },
    isMySelf(item) {//是否为自己
      if (item.createUser == this.userInfo.id) {
        return true
      }
      return false
    },
    del(id, index,list,type) {//type 用来区分是评论列表还是回复评论的列表
      let _this = this
      this.$createDialog({
        type: 'confirm',
        title: "温馨提示",
        content: '确认删除？',
        confirmBtn: {
          text: '确定',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
        cancelBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;'
        },
        onConfirm: () => {
          _this.deleteMaterial(id, index,list,type);
        },
        onCancel: () => {
        }
      }).show()
    },
    deleteMaterial(id, index,list,type) {
      this.fetchService.topic_delXdOpt(id).then(res => {
        if (res.code !== 0) {
          return this.tools.tip(res.message)
        }
        this.tools.tip("删除成功")
        if(type === 1){
          this.$emit('commentTotalDel')
          list.splice(index, 1)
        }else if(type === 2){
          console.log('type==',list.commentTotal)
          list.child.splice(index, 1)
          list.commentTotal--
        }
      })
    },
    commentDialog() {
      // this.$router.push({path:'/fullscreenComponent'})
      console.log('fullscreenComponent')
      // this.$router.push({ path: `/fullscreenComponent`});
    },
    upComment(item, index,list,type) {
      if (item.selfSupport) {
        let data = {
          "comment": "",
          "commentId": item.id,
          "optFlag": "1",
          "replyToUser": "",
          "xdId": this.xdId
        }
        return this.fetchService.topic_cancelSupport(data).then(res => {
          if (res.code !== 0) {
            // return this.tools.tip(res.message , 2000)
            return
          }
          // this.hasUp = true
          list[index].supportTotal--
          list[index].selfSupport = false
          return res
        })
      } else {
        let data = {
          "comment": "",
          "commentId": item.id,
          "optFlag": "1",
          "replyToUser": "",
          "xdId": this.xdId
        }
        return this.fetchService.topic_subSupport(data).then(res => {
          if (res.code !== 0) {
            // return this.tools.tip(res.message , 2000)
            return
          }
          // this.hasUp = true
          list[index].supportTotal++
          list[index].selfSupport = true
          // this.tools.tip('点赞成功', 1500)
          return res
        })
      }
    },
    closeByMask() {
      this.maskClosable && this.$emit('update:display', false)
    },
    closeByButton() {
      this.$emit('update:display', false)
      this.$emit('loadData')
    },
    onfocus(item) {
      console.log('itemitem=',item);
      if(typeof item !== 'undefined'){
        this.commentNewId = item.id
        this.replyToUser = item.createUserName
      }
      this.$refs.textareaPl.focus();
      // this.commentNewId = item.id || ''
      // console.log('this.commentNewId',this.commentNewId);
      this.textareaClass = 'on-focus'
    },
    onfocusOne(child,id){
      if(typeof child !== 'undefined'){
        this.commentNewId = id
        this.replyToUser = child.createUserName
      }
      this.$refs.textareaPl.focus();
      this.textareaClass = 'on-focus'
    },
    onblur(key) {
      this.textareaClass = ''
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/common/stylus/moon.scss";

.user-avatar {
  padding: 0;

  .avatar {
    width: 1.2rem;
    height: 1.2rem;
  }
}

.head-my {
  font-size: 15PX;
  display: flex;
  justify-content: space-between;
  width: 100%;

  .right {
    margin-right: 4%;
    color: #D81E06;

    .icon-delete {
      display: inline-block;
      background: url('../../../static/images/dangjian/home/icon-delete-red.png') no-repeat center;
      width: 0.4rem;
      height: 0.4rem;
      background-size: 100% 100%;
      margin-right: 0.13333rem;
    }
  }
}

.scoll-my {
  height: 100%;
  overflow: scroll;
}

.drawer {
  /* 遮罩 */
  .mask-show {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(0, 0, 0, .5);
    opacity: 1;
    transition: opacity .5s;
  }

  .mask-hide {
    opacity: 0;
    transition: opacity .5s;
  }

  /* 滑块 */
  .main {
    position: fixed;
    z-index: 10;
    top: 1.174rem;
    height: 96%;
    /*height: 100%;*/
    background: #fff;
    transition: all 0.5s;
  }

  .main-show {
    opacity: 1;
    border-top-left-radius: 15px; //左上角
    border-top-right-radius: 15px; //右上角
  }

  .main-hide {
    opacity: 0;
  }


  /* 其他样式 */
  .drawer-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 1.5rem;
    line-height: 0.6rem;
    padding: 0 0.2rem;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    font-size: 20PX;
    align-items: center;

    .left {
      margin-left: 5%;
      font-weight: bold;
      color: #8f8f94;
    }

    .icon-close {
      display: inline-block;
      width: 0.7rem;
      height: 0.7rem;
      background: url('../../../static/images/dangjian/home/icon-close.png') no-repeat center;
      background-size: 100% 100%;
      margin-right: 0.13333rem;
    }

    /*.close-btn {
      display: inline-block;
      cursor: pointer;
      height: 100%;
      padding-left: 20px;
    }*/
  }

  .drawer-body {
    font-size: 14px;
    padding: 15px;
  }
}

.inner {
  min-height: 1.2rem;
  /*border-bottom: 1px solid #d0d0d0;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #d0d0d0;
  padding: 2%;
  position: absolute;
  bottom: 0.5rem;
  background: #ffffff;
  width: 100%;

  .icons-btn-wrap {
    .hasUp-my {
      font-size: 14PX;
      margin-right: 17%;
      margin-left: 2%;
    }

    width: 100%;
    justify-content: flex-end;

    .icon .num {
      background: #868686;
    }
  }

  .text-btn {
    padding: 0px 0.26667rem;
    margin-left: 0.13333rem;
    color: #e20001;
    font-size: 14PX;
    font-weight: bold;
    width: 2.4rem;

    .spans-my {
      display: flex;
      align-items: center;
      height: 100%;
    }
  }

  .avatar {
    margin-right: 0.2rem;
    width: 1.2rem;
    height: 1.2rem;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border: none;
    border-radius: 100%;
    overflow: hidden;
    position: relative;
    background: #ddd;

    > img {
      position: absolute;
      left: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      /* width: 100%; */
      height: 100%;
    }
  }

  .input-wrap {
    border-radius: 10px;
    display: flex;
    //max-width: calc(100vw);
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin-right: 2%;
    //margin-bottom: 5%;
    //margin-top: 5%;
    input, textarea {
      font-family: dang;
      box-sizing: border-box;
      //margin-right: 50px;
      display: block;
      width: 100%;
      border: none;
      border-radius: 10px;
      line-height: 1.2em;
      font-size: $defaultFontSize;
      padding-top: 9PX;
      height: 30PX;

      &::placeholder {
        font-size: $defaultFontSize;
      }
    }
  }
}

.study-my {
  padding: 0.04rem;
  /* background: #fff; */
  /*-webkit-box-shadow: 0px 0.06667rem 0.26667rem 0px rgba(0,0,59,0.1);*/
  /* box-shadow: 0px 0.06667rem 0.26667rem 0px rgba(0,0,59,0.1); */
  overflow: hidden;
  margin: 0 0 0.04rem 0;
  border-radius: 0px;
  border-bottom: 1px solid #d0d0d0;

  .card-foot-my {
    padding-left: 0.3rem;
    padding-bottom: 0.3rem;
    width: 85%;
    float: right;

    .recomment-my {
      border-top: 1px solid #d0d0d0;
      font-size: 14PX;
      padding-left: 10%;

      .title {
        margin-top: 2%;
        .arrow_left{
          display: inline-block;
          background: url('../../../static/images/icon-right.png') no-repeat center;
          width: 0.4rem;
          height: 0.3rem;
          background-size: 100% 100%;
        }
      }
    }
  }
}

.span-my {
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
  font-size: 15PX;
  padding-bottom: 2%;
  padding-right: 10%;
  color: #8f8f94;
}

.text {
  font-size: 12PX;
  display: flex;
  justify-content: space-between;
  color: #8f8f94;
  padding-bottom: 2%;

  .right-my {
    display: flex;
    justify-content: space-around;
    width: 40%;

    .support {
      margin-right: 17%;
      display: flex;
      align-items: center;

      .icon-like {
        display: inline-block;
        background: url('../../../static/images/dangjian/home/news/icon-like.png') no-repeat center;
        width: 0.4rem;
        height: 0.4rem;
        background-size: 100% 100%;
        margin-right: 0.13333rem;
      }

      .icon-licked {
        display: inline-block;
        background: url('../../../static/images/dangjian/home/news/icon-like-active.png') no-repeat center;
        width: 0.4rem;
        height: 0.4rem;
        background-size: 100% 100%;
        margin-right: 0.13333rem;
      }

      .icon-comment {
        display: inline-block;
        background: url('../../../static/images/dangjian/home/icon-comment.png') no-repeat center;
        width: 0.4rem;
        height: 0.4rem;
        background-size: 100% 100%;
        margin-right: 0.13333rem;

        &:hover {
          opacity: .8;
        }

        &.open {
          width: 200px;
          height: 80px;
          font-size: 18px;
          background-color: orange;
          color: #fff;
        }

        &.try {
          width: 100px;
          height: 40px;
          background-color: green;
          color: #fff;
          margin-top: 50px;
        }
      }
    }
  }
}
</style>

